<template>
  <div class="auth-container">
    <!-- 左侧表单区 -->
    <div class="form-section">
      <div class="form-wrapper">
        <h2>找回密码</h2>
        <form @submit.prevent="handleSubmit">
          <div class="form-group">
            <label for="form.phone">手机号：</label>
            <input type="text" v-model="form.phone" placeholder="请输入手机号" required>
          </div>
          <div class="form-group code-group">
            <label for="form.code">验证码：</label>
            <input type="text" v-model="form.code" placeholder="请输入验证码" required>
            <button type="button" class="code-btn" @click="sendCode" :disabled="isSending">
              {{ isSending ? `${countdown}s后重试` : '获取验证码' }}
            </button>
          </div>
          <div v-if="receivedCode" class="code-reminder">
            验证码: {{ receivedCode }}
          </div>
          <div class="form-group">
            <label for="form.newPassword">新密码：</label>
            <input type="password" v-model="form.newPassword" placeholder="请输入新密码" required>
          </div>
          <div class="form-group">
            <label for="form.confirmPassword">再次输入密码：</label>
            <input type="password" v-model="form.confirmPassword" placeholder="请确认新密码" required>
          </div>
          <button type="submit" class="reset-btn">重 置 密 码</button>
        </form>
        <div class="footer-links">
          <a @click="switchToLogin">返回登录</a>
        </div>
      </div>
    </div>

    <!-- 右侧展示区 -->
    <div class="display-section">
      <div class="form-wrapper">
      <div class="text-container">
        <h3>安全重置密码</h3>
        <p>请按照提示操作</p>
      </div>
      <div class="security-tips">
        <h4>安全提示：</h4>
        <p>1. 请确保您使用的是官方APP或网站</p>
        <p>2. 不要将验证码透露给他人</p>
        <p>3. 建议定期更换密码</p>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        phone: '',
        code: '',
        newPassword: '',
        confirmPassword: ''
      },
      isSending: false,
      countdown: 60,
      receivedCode: ''
    }
  },
  methods: {
    async sendCode() {
  this.isSending = true;
  this.countdown = 60;

  try {
    const response = await this.$axios.get('http://localhost:8081/api/auth/forget/sendCode', {
      params: { phone: this.form.phone },
      withCredentials: true,
    });
    console.log('验证码发送成功:', response.data);
    if (response.data.success) {
      this.receivedCode = response.data.code; 
     
    } else {
      alert(response.data.message);
    }
  } catch (error) {
    console.error('验证码发送失败:', error);
    alert('验证码发送失败，请重试');
  }

  const timer = setInterval(() => {
    this.countdown--;
    if (this.countdown <= 0) {
      clearInterval(timer);
      this.isSending = false;
    }
  }, 1000);
},

async handleSubmit() {
  try {
    const response = await this.$axios.post('http://localhost:8081/api/auth/forget/reset', {
      phone: this.form.phone,
      code: this.form.code,
      newPassword: this.form.newPassword,
      confirmPassword: this.form.confirmPassword
    });

    console.log('密码重置成功:', response.data);
    alert('密码重置成功，请使用新密码登录');
    this.$router.push('/');
  } catch (error) {
    console.error('密码重置失败:', error);
    alert('密码重置失败，请检查输入并重试');
  }
},

    switchToLogin() {
      this.$router.push('/');
    }
  }
}
</script>

<style scoped>
.auth-container {
  width: 1000px;
  display: flex;
  min-height: 100vh;
  margin: 0 auto;
  background: linear-gradient(135deg, #f5f9fc 0%, #e6f0fa 100%);
  padding: 0 50px; 
}
.form-section, .display-section {
  flex: 1;
  padding: 40px 0; /* 上下内边距 */
}
.auth-container::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: rgba(64, 158, 255, 0.08);
  border-radius: 50%;
}

.auth-container::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 150px;
  height: 150px;
  background: rgba(64, 158, 255, 0.05);
  border-radius: 50%;
}
.form-section {
  flex: 0 0 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.form-wrapper {
  width: 100%;
  max-width: 400px;
  background: white;
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1;
  transition: transform 0.3s, box-shadow 0.3s;
}
.form-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.form-group {
  display: flex; 
  align-items: center; 
  margin-bottom: 20px;
}
.form-group label {
  width: 100px; /* 统一标签宽度 */
  text-align: right; /* 右对齐标签文本 */
  margin-right: 15px;
  font-size: 14px;
  color: #5e6d82;
  flex-shrink: 0; /* 防止标签被压缩 */
}

.form-group input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 14px;
}
.form-group input:focus{
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  outline: none;
}

.code-group {
  display: flex;
  align-items: center;
  width: 100%;
}

.code-group input {
  width: 150px; /* 固定验证码输入框宽度 */
  margin-right: 10px;
}

.code-btn {
  min-width: 80px;
  padding: 12px;
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  color: #606266;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  flex-shrink: 0; 
}


.reset-btn {
  width: 100%;
  padding: 12px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 10px;
}

.reset-btn:hover {
  background: #66b1ff;
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
}
.security-tips {
  margin-top: 30px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.security-tips h4 {
  margin-bottom: 15px;
  color: #333;
}

.security-tips p {
  margin: 8px 0;
  color: #666;
  font-size: 14px;
}
.display-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}
  
  .text-container h3 {
  font-size: 1.8rem;
  color: #2c3e50;
  font-weight: 600;
  margin-bottom: 0.8rem;
  position: relative;
  display: inline-block;
}
.text-container h3::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background: linear-gradient(to right, #4facfe, #00f2fe);
}
.text-container p {
  color: #718096;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 80%;
  margin: 0 auto 1.5rem;
}


.footer-links {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.footer-links a {
  color: #409eff;
  cursor: pointer;
  margin: 0 10px;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-links span {
  color: #dcdfe6;
}
</style>